<template>
  <div class="main">
    <div
      style="
        width: 100%;
        min-height: 100%;
        background: #fff;
        margin: -25px auto;
        overflow-y: hidden;
      "
    >
      <div style="margin: 0 auto; width: 1065px">
        <el-row>
          <el-col :span="14">
            <div style="padding-bottom: 25px; margin-left: -20px">
              <div
                style="display: flex; flex-wrap: wrap; width: 700px"
                v-if="classifies.length > 1"
              >
                <span
                  class="res-span"
                  :class="[item.selected ? 'res-span-active' : '']"
                  v-for="(item, index) in classifies"
                  :key="index"
                  @click="openResource(item)"
                  >{{ item.name }}</span
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <!--搜索一-->
        <div
          style="margin-top: -25px; width: 1065px; display: flex"
          v-if="type === 0"
        >
          <span style="width: 97px; display: flex; align-items: center">{{
            $t("Info.state")
          }}</span>
          <el-select
            v-model="value"
            placeholder="全部"
            style="width: 160px"
            @change="select(value)"
          >
            <el-option
              v-for="item2 in options"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value"
            >
            </el-option>
          </el-select>
          <el-input
            :placeholder="$t('Info.publication')"
            style="width: 636px; margin-left: 50px"
            v-model="orderNo"
          ></el-input>
          <button class="search" @click="search(orderNo)">
            {{ $t("Info.search") }}
          </button>
        </div>
        <!--搜索二-->
        <div
          style="margin-top: -25px; width: 1065px; display: flex"
          v-if="type === 1"
        >
          <span style="width: 97px; display: flex; align-items: center">{{
            $t("Info.state")
          }}</span>
          <el-select
            v-model="value2"
            placeholder="全部"
            style="width: 160px"
            @change="selectCustom(value2)"
          >
            <el-option
              v-for="item3 in options2"
              :key="item3.value2"
              :label="item3.label"
              :value="item3.value2"
            >
            </el-option>
          </el-select>
          <el-input
            :placeholder="$t('Info.loginAccount')"
            style="width: 636px; margin-left: 50px"
            v-model="orderNum"
          ></el-input>
          <button class="search" @click="searchCustom(orderNum)">
            {{ $t("Info.search") }}
          </button>
        </div>
        <!--表格一-->
        <div id="mytable" v-if="type === 0">
          <div>
            <el-table :data="resList" border style="margin-top: 40px">
              <el-table-column
                :label="$t('Info.bookCover')"
                width="120"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <img
                    style="width: 90px; height: 90px"
                    :src="getUrl(scope.row.bookCover)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="bookName"
                :label="$t('Info.bookName')"
                width="120"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                class="time"
                prop="status"
                :label="$t('Info.bookStatus')"
                width="80"
                header-align="center"
                align="center"
                :formatter="getMyStatus"
              ></el-table-column>
              <el-table-column
                class="time"
                prop="account"
                :label="$t('Info.publishAccount')"
                width="190"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                class="time"
                prop="applyDate"
                :label="$t('Info.applyTime')"
                width="160"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                class="time"
                prop="createDate"
                :label="$t('Info.onlineTime')"
                width="160"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                :label="$t('Info.operate')"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="normal"
                    style="padding: 4px"
                    @click="open(scope.row.status, scope.row.bookGuid)"
                    >查看订单
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div
            style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              margin-top: 30px;
              padding-bottom: 30px;
            "
          >
            <div class="block">
              <el-pagination
                @current-change="handleCurrentChange(page)"
                :current-page.sync="page"
                layout="prev,pager,next"
                :page-size="pageSize"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <!--表格二-->
        <div id="mytable2" v-if="type === 1">
          <div class="header-title">
            <div class="detail">{{ $t("Info.orderDetail") }}</div>
            <div class="account">{{ $t("Info.buyAccount") }}</div>
            <div class="time">{{ $t("Info.buyTime") }}</div>
            <div class="status">{{ $t("Info.orderStatus") }}</div>
            <div class="operate">{{ $t("Info.operate") }}</div>
          </div>
          <div v-if="showWord" class="word">{{ $t("Info.noData") }}</div>
          <div v-for="(item, index) in customList" :key="index">
            <div id="header">
              <span
                style="font-size: 14px; margin-left: 20px; margin-top: 10px"
                >{{ getDate(item) }}</span
              >
              <span style="font-size: 14px; margin-top: 10px"
                >订单创建时间：{{ item.createDate }}</span
              >

              <span style="font-size: 14px; margin-top: 10px"
                >{{ $t("Info.orderNum") }}：{{ item.orderNo }}</span
              >
              <span style="color: red; font-weight: bolder"
                >订单总金额： ￥ {{ item.totalAmount }}</span
              >
              <div
                class="search-top"
                style="margin-left: 20px; margin-top: 3px"
                id="mySearch"
                v-if="customList[index].list.length > 1"
              >
                <span
                  class="el-icon-arrow-up"
                  id="top"
                  @click="showBox(1, item, index)"
                  v-show="item.show"
                ></span>
                <span
                  class="el-icon-arrow-down"
                  id="down"
                  @click="showBox(2, item, index)"
                  v-show="!item.show"
                ></span>
              </div>
            </div>
            <div style="padding-bottom: 20px">
              <el-table
                :data="getTable(index)"
                border
                :span-method="getFunction(item)"
                :header-cell-style="getRowClass"
                style="width: 100%"
              >
                <el-table-column prop="list" label="订单详情" width="480">
                  <template slot-scope="scope">
                    <div style="display: flex; justify-content: space-between">
                      <div style="margin: auto 0">
                        <img
                          :src="getUrl(scope.row.resourceUrl)"
                          style="width: 90px; height: 90px"
                        />
                      </div>
                      <div style="width: 395px; margin-left: 10px">
                        <span
                          style="
                            font-weight: bolder;
                            color: black;
                            margin-left: 5px;
                          "
                          >{{ scope.row.resourceName }}</span
                        >
                        <!-- <span
                          style="color: red; float: right; font-weight: bolder"
                          >￥ {{ scope.row.resourceTotalPrice }}</span
                        > -->
                        <div class="d4">
                          <span class="s4">{{
                            $t("resourceOrder.priceStructure")
                          }}</span>
                          <span class="s4" style="margin-left: 5px">{{
                            $t("shoppingCartOrder.basePrice")
                          }}</span>
                          <span
                            class="s4"
                            style="color: red; font-weight: bolder"
                            >￥ {{ scope.row.resourceUnitPrice }}</span
                          >
                          <span class="s4" style="margin-left: 5px"
                            >x {{ scope.row.purchaseNum }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="account"
                  align="center"
                  label="购买账号"
                  width="195"
                >
                  {{ item.account }}
                </el-table-column>
                <el-table-column
                  prop="payDate"
                  align="center"
                  label="购买时间"
                  width="159"
                >
                  {{ item.payDate }}
                </el-table-column>
                <el-table-column
                  prop="status"
                  align="center"
                  :formatter="getStatus"
                  label="购买状态"
                >
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="normal"
                      style="padding: 5px"
                      @click="showCustom(item.orderNo, scope.row)"
                      >{{ $t("Info.view") }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div
            style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              margin-top: 12px;
              padding-bottom: 30px;
            "
          >
            <div class="block">
              <el-pagination
                @current-change="change(page9)"
                :current-page.sync="page9"
                layout="prev,pager,next"
                :page-size="pageSize"
                :total="customTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden="tips">
      <img :src="resultIcon" />
      <span>{{ msg }}</span>
    </div>
    <!--    <my-slot :myData="myData" :resourceTotal="resourceTotal" v-on:listenEvent="showMsg"  :support="support"></my-slot>-->
    <order-detail
      :myData="myData"
      :resourceTotal="resourceTotal"
      v-on:listenEvent="showMsg"
      :showCommonText="showCommonText"
      :showThirdText="showThirdText"
      :showCustomText="showCustomText"
    ></order-detail>
    <CustomOrder v-on:listenCustom="showCustomMsg"></CustomOrder>
    <!-- <book-cover></book-cover> -->
    <order-num-slot
      :orderList="orderList"
      v-on:listenCustom2="showCustomMsg2"
    ></order-num-slot>
    <book-slot :bookInfo="bookInfo"></book-slot>
  </div>
</template>

<script>
import MySlot from "../../components/book-order/MySlot";
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";
import util from "../../common/util";
import CustomOrder from "../../components/custom/CustomOrder";
import OrderNumSlot from "../../components/book-order/OrderNumSlot";
import OrderDetail from "../../components/book-order/OrderDetail";
import BookSlot from "../../components/book-order/BookSlot";

import encryption from "../../common/encryption";
import { Container } from "element-ui";

let MyContent;
let userId;
let pressId;
let search;
let status;
let search2;
let status2;
let culture;
let orderType;
let detailUrl;

export default {
  name: "OrderList",
  components: {
    MySlot,
    CustomOrder,

    OrderNumSlot,
    OrderDetail,
    BookSlot,
  },
  props: {
    addParentMount: Function,
    onChangeParentDetail: Function,
  },
  data() {
    return {
      selected: false,

      bookGuid2: "",
      tableData: [],
      options: [
        {
          value: "1",
          label: "已上线",
        },
        {
          value: "0",
          label: "审核中",
        },
        {
          value: "",
          label: "全部",
        },
      ],
      options2: [
        {
          value2: "0",
          label: "已支付",
        },
        {
          value2: "1",
          label: "待支付",
        },
        {
          value2: "2",
          label: "订单取消",
        },
        {
          value2: "",
          label: "全部",
        },
      ],
      value2: "",
      value: "",
      myData: null,
      resourceData: [],
      pageSize: 5,
      resList: [],
      total: 0,
      page: 1,
      orderNo: "",
      resourceTotal: 0,
      customList: [],
      customTotal: 0,
      // page3: 1,
      page9: 1,
      page10: 1,
      orderNum: "",
      belong: 0,
      classifies: [
        {
          id: 3,
          name: "图书发布记录",
          selected: true,
        },
        {
          id: 2,
          name: "资源购买记录",
          selected: false,
        },
      ],
      type: 0,
      // rowIndex: "-1",
      OrderIndexArr: [],
      hoverOrderArr: [],
      showMoreSearch: true,
      orderList: null,
      OrderNum: "",
      resultIcon: "../assets/images/icon_error.png",
      msg: "",
      tips: true,
      language: "",
      bookInfo: null,
      showCustomText: false,
      showThirdText: false,
      showCommonText: false,
    };
  },
  computed: {
    showWord() {
      return this.customList.length > 0 ? false : true;
    },
  },
  created() {
    this.language = this.$route.query.culture;
    userId = this.$route.query.userId;
    pressId = this.$route.query.pressId;
    culture = this.$route.query.culture;
    getResources(1, this);
    this.objectSpanMethod3 = this.objectSpanMethod2;
  },
  mounted() {
    new QWebChannel(qt.webChannelTransport, function (channel) {
      MyContent = channel.objects.Js2QtFunction;
    });
  },
  methods: {
    openBook(m) {
      getBookInfo(m, this);
      bus.$emit("showBookInfo");
    },
    onChangeDetail(id) {
      detailUrl = `/detail?id=${id}&belong=${1}&userId=${
        this.$route.query.userId
      }&culture=${this.$route.query.culture}&pressId=${
        this.$route.query.pressId
      }&from=center`;
      this.onChangeParentDetail(detailUrl);
    },
    getDate(item) {
      if (item.status === 3) {
        return util.formate(item.completeDate);
      } else if (item.status === 1) {
        return util.formate(item.createDate);
      } else if (item.status === 0) {
        return util.formate(item.payDate);
      } else if (item.status === 2) {
        return util.formate(item.updateDate);
      }
    },
    getFunction(item) {
      return item.selected === true
        ? this.objectSpanMethod3
        : this.objectSpanMethod2;
    },
    /**
     * 截取图片路径，去掉逗号
     */
    getUrl(url) {
      if (url !== null) {
        if (url.indexOf(",") > -1) {
          return url.replace(",", "");
        } else {
          return url;
        }
      }
    },
    getTable(index) {
      if (this.customList.length > 0) {
        return this.customList[index].list;
      }
    },
    showPicture(t) {
      bus.$emit("pictureSlot", t);
    },

    addMount(i) {
      this.addParentMount(i);
    },

    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "display:none";
      } else {
        return "";
      }
    },
    showBox(t, item, index) {
      intiListSelected(this, item);
      intiListShow(this, item, index);

      console.log(this.customList);
      if (t === 2) {
        this.objectSpanMethod3 = this.objectSpanMethod2;
      } else if (t === 1) {
        this.objectSpanMethod3 = this.objectSpanMethod;
      }
    },

    objectSpanMethod3() {},

    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4 ||
        columnIndex === 0
      ) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i];
          for (let j = 0; j < element.length; j++) {
            let item = element[j];
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1,
                };
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          }
        }
      }
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4
      ) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i];
          for (let j = 0; j < element.length; j++) {
            let item = element[j];
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1,
                };
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          }
        }
      }
    },

    /**
     * 图书发布订单
     */
    openResource(item) {
      intiTypeDataSelected(this, item);
      if (item.id === 3) {
        status = "";
        search = "";
        // this.value = "-1";
        this.orderNo = "";
        getResources(1, this);
        this.type = 0;
      } else {
        orderType = item.id;
        search2 = "";
        status2 = "";
        this.value2 = "";
        this.orderNum = "";
        getResourceList(1, 1, this);
        this.type = 1;
        this.options2 = [
          {
            value2: "0",
            label: "已支付",
          },
          {
            value2: "1",
            label: "待支付",
          },
          {
            value2: "2",
            label: "订单取消",
          },
          {
            value2: "",
            label: "全部",
          },
        ];
      }
    },
    /**
     * 资源订单取消订单或立即支付后立即刷新订单列表当前页
     */
    showCustomMsg() {
      getResourceList(this.page9, 1, this);
    },
    showCustomMsg2() {
      // getCustom(this.page3, this)
      let that = this;
      ajax.get({
        url: api.bookGuid.routeName + this.bookGuid2 + "?r=" + Math.random(),
        success: function (res) {
          that.orderList = res;
          that.getOrderDate();
        },
        fail(res) {
          if (res.ErrCode === 404) {
            that.msg = "没有订单记录";
            that.resultIcon = require("../../assets/images/icon_error.png");
            that.tips = false;
            setTimeout(function () {
              that.tips = true;
            }, 1500);
          }
        },
      });
    },
    /**
     * 图书发布订单取消订单后立即刷新订单列表当前页
     */
    showMsg() {
      console.log(this.page + "vvvv");
      getResources(this.page, this);
    },

    /**
     * 资源费用虚拟价格计算
     */
    getData() {
      let t = 0;
      if (this.myData.responseAreditorBookOrderDetailList !== null) {
        this.myData.responseAreditorBookOrderDetailList.forEach((el) => {
          if (el.resourceSource !== 3) {
            t += el.resourcePrice;
          }
        });
        this.resourceTotal = t;
      }
    },

    getOrderDate() {
      for (let i = 0; i < this.orderList.length; i++) {
        console.log(this.orderList[i].createDate);
        let tmp = this.orderList[i];
        // let tmpTimeSpan = this.resList[i].createDate
        // console.log(util.formate(tmpTimeSpan))
        this.orderList[i].createDate = util.formate(tmp.createDate);
      }
    },

    /**
     * 图书发布订单列表时间格式转换
     */
    // loadData() {
    //   for (let i = 0; i < this.resList.length; i++) {
    //     if (this.resList[i].createDate !== null) {
    //       this.resList[i].createDate = util.formate(this.resList[i].createDate);
    //     }

    //     if (this.resList[i].applyDate !== null) {
    //       this.resList[i].applyDate = util.formate(this.resList[i].applyDate);
    //     }
    //   }
    // },

    /**
     * 资源订单列表时间格式转换
     */
    // loadCustomData() {
    //   if (this.customList.length > 0) {
    //     for (let i = 0; i < this.customList.length; i++) {
    //       if (this.customList[i].list.length > 0) {
    //         for (var j = 0; j < this.customList[i].list.length; j++) {
    //           this.customList[i].list[j].createDate = util.formate(
    //             this.customList[i].createDate
    //           );
    //         }
    //       }
    //     }
    //   }
    // },

    /**
     * 订单详情基本信息时间格式转换
     */
    // loadDate() {
    //   this.myData.createDate = util.formate(this.myData.createDate);
    // },

    /**
     * 资源订单状态显示
     */
    getStatus(row, column) {
      if (parseInt(row.status) == 0) {
        return "已支付";
      } else if (parseInt(row.status) == 1) {
        return "待支付";
      } else if (parseInt(row.status) == 2) {
        return "订单取消";
      } else if (parseInt(row.status) == 3) {
        return "已完成";
      }
    },

    /**
     * 图书发布订单状态显示
     */
    getMyStatus(row, column) {
      if (parseInt(row.status) === 90) {
        return "已上线";
      } else {
        return "审核中";
      }
    },

    /**
     * 获取图书发布订单搜索框数据
     */
    search(i) {
      status = this.value;
      search = i;
      this.page = 1;
      getResources(1, this);
    },

    /**
     * 获取图书发布订单下拉框数据
     */
    select(t) {
      search = "";
      this.orderNo = "";
      status = t;
      console.log(t);
      this.page = 1;
      getResources(1, this);
    },

    /**
     * 获取资源订单搜索框数据
     */
    searchCustom(m) {
      console.log(m);
      status2 = this.value2;
      search2 = m;
      this.page3 = 1;
      // getCustom(1, this)
      getResourceList(1, 1, this);
    },

    /**
     * 获取资源订单下拉框数据
     */
    selectCustom(n) {
      search2 = "";
      this.orderNum = "";
      status2 = n;
      this.page3 = 1;
      // getCustom(1, this)
      getResourceList(1, 1, this);
    },

    /**
     * 打开图书订单详情页方法
     */
    open(id, id2) {
      // this.bookGuid2 = id2;
      let that = this;
      console.log(id);
      console.log(id2);
      ajax.get({
        url: api.orders.routeName + api.orders.children.detail + id2,
        // data: { bookGuid: id2 },
        success: function (res) {
          that.orderList = JSON.parse(encryption.decryptionMxr(res));

          that.getOrderDate();
          if (that.orderList.length > 1) {
            bus.$emit("showOrderNum", id, id2);
          } else if (that.orderList.length === 1) {
            that.orderNum = that.orderList[0].orderNo;
            ajax.get({
              url:
                api.orders.routeName +
                api.orders.children.orderNo +
                that.orderNum,
              success: function (res) {
                that.myData = res;
                bus.$emit("showClause2", res.status);
                // that.loadDate();
                if (that.myData.responseAreditorBookOrderDetailList !== null) {
                  that.getData();
                  that.showCustomText = false;
                  that.showThirdText = false;
                  that.showCommonText = false;
                  that.myData.responseAreditorBookOrderDetailList.forEach(
                    (el) => {
                      if (el.resourceSource === 4) {
                        that.showCustomText = true;
                      }
                      if (el.resourceSource === 2) {
                        that.showThirdText = true;
                      }
                      if (el.resourceSource === 1) {
                        that.showCommonText = true;
                      }
                    }
                  );
                } else {
                  that.resourceTotal = 0;
                }
              },
              error(e) {
                console.log(e);
              },
            });
          }
        },
        fail(res) {
          if (res.ErrCode === 404) {
            that.msg = "没有订单记录";
            that.resultIcon = require("../../assets/images/icon_error.png");
            that.tips = false;
            setTimeout(function () {
              that.tips = true;
            }, 1500);
          }
        },
      });
    },

    /**
     * 打开资源订单详情
     */
    showCustom(m, row) {
      console.log(m, row);
      bus.$emit("showCustomRes", m, row.status);
    },

    /**
     * 图书发布列表分页
     */
    handleCurrentChange(val) {
      console.log(val);
      getResources(val, this);
    },

    /**
     * 普通定制资源列表分页
     */
    change(val) {
      console.log(val);
      getResourceList(val, 1, this);
    },
  },
};

/**
 * 获取图书发布表格中的数据方法
 */
function getResources(page, that) {
  console.log(page);
  ajax.get({
    url: api.orders.routeName + api.orders.children.bookList,
    data: {
      search: search,
      status: status,
      page: page,
      pageSize: 5,
      userId: userId,
    },
    success(res) {
      that.resp = JSON.parse(encryption.decryptionMxr(res));
      console.log(that.resp);
      that.resList = that.resp.list;
      console.log(that.resList[0].bookCover);
      that.total = that.resp.total;
      that.page = page;
      // that.loadData();
    },
    error(e) {
      console.log(e);
    },
  });
}

/**
 * 初始化类型选择状态
 *
 * @param that VUE对象
 * @param item 类型对象数据
 */
function intiTypeDataSelected(that, item) {
  that.classifies.forEach((e) => {
    e.selected = false;
  });

  item.selected = true;
}

function intiListSelected(that, item) {
  that.customList.forEach((e) => {
    e.selected = false;
  });

  item.selected = true;
}

/**
 * 初始化选择状态
 *
 * @param that VUE对象
 * @param item 类型对象数据
 */
function intiListShow(that, item, index) {
  that.customList.forEach((i) => {
    if (i.show !== that.customList[index].show) {
      i.show = true;
    }
  });
  item.show = !item.show;
  that.$set(that.customList, index, {
    account: item.account,
    address: item.address,
    completeDate: item.completeDate,
    contactWay: item.contactWay,
    contacts: item.contacts,
    createDate: item.createDate,
    id: item.id,
    list: item.list,
    orderNo: item.orderNo,
    orderType: item.orderType,
    pageInfo: item.pageInfo,
    payAmount: item.payAmount,
    payChannel: item.payChannel,
    payDate: item.payDate,
    pressId: item.pressId,
    pressName: item.pressName,
    resourceTotalNums: item.resourceTotalNums,
    selected: item.selected,
    severId: item.severId,
    show: item.show,
    status: item.status,
    totalAmount: item.totalAmount,
    updateDate: item.updateDate,
    userId: item.userId,
  });

  console.log(item.show);
  console.log(that.customList);
}

/**
 * 获取资源购买记录表格数据
 */
function getResourceList(page9, page10, that) {
  ajax.get({
    url: api.customDetail.routeName + api.customDetail.children.list,
    data: {
      pageNo: page9,
      status: status2,
      pageSize: 5,
      userId: userId,
      keyWord: search2,
    },
    success(res) {
      that.response = JSON.parse(encryption.decryptionMxr(res));
      console.log(that.response);
      that.customList = that.response.list;
      that.customTotal = that.response.total;
      console.log(that.customList);
      that.page9 = page9;
    },
    error(e) {
      console.log(e);
    },
  });
}

//获取图书信息
function getBookInfo(bookGuid, that) {
  ajax.get({
    url: api.bookInfo.routeName + bookGuid,
    success(res) {
      that.bookInfo = res;
    },
    error(e) {
      console.log(e);
    },
  });
}
</script>

<style scoped>
.main {
  min-height: 100%;
  width: 100%;
  background: #eff3f5;
}

.el-main {
  color: #333;
}

.el-aside,
.el-main {
  overflow-y: hidden;
}

.el-row {
  margin: 25px 5px;
}

.search {
  width: 102px;
  height: 40px;
  border: none;
  background: #66b1ff;
  color: white;
  border-radius: 4px;
  margin-left: 20px;
  font-size: 16px;
  letter-spacing: 2px;
}

.search:hover {
  cursor: pointer;
}

.res-span {
  display: inline-block;
  padding: 9px 17px;
  background: #e3e3e3;
  border-radius: 4px 4px 0px 0px;
  font-size: 16px;
  font-weight: bolder;
  color: black;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 15px;
}

.res-span-active {
  background: #4381e6;
  color: #ffffff;
}

.resBox {
  display: none;
}

.resBox-active {
  display: flex;
}

.customBox {
  width: 130px;
  height: 30px;
  background: #4381e6;
  margin-left: 15px;
  margin-top: 20px;
  color: white;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
}

.customBox:hover {
  cursor: pointer;
}

.res-box {
  background: white;
  color: #666666;
  border: 1px solid #979797;
}

.main {
  margin-top: -40px;
}

#mytable,
#mytable2 {
  width: 1065px;
}

#mytable2 {
  margin-top: 25px;
}

.search-top {
  width: 30px;
  height: 33px;
  background: #f4fafe;
  border-radius: 4px;
  color: #4381e6;
  text-align: center;
  line-height: 23px;
  font-size: 16px;
  float: right;
}

.search-top:hover {
  cursor: pointer;
}

#header {
  width: 1063px;
  height: 35px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  padding-top: 10px;
  background: #f4fafe;
}

.bigPicture:hover {
  cursor: pointer;
}

.header-title {
  width: 1063px;
  height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  background: #ededed;
  margin-bottom: 20px;
  display: flex;
}

.detail,
.account,
.time,
.status,
.operate {
  width: 485px;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #333333;
}

.account {
  width: 200px;
}

.time {
  width: 165px;
}

.status {
  width: 125px;
}

.operate {
  width: 110px;
}

.tips {
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: fixed;
  top: 0;
  left: 40%;
  width: auto;
  height: 65px;
  z-index: 99;
}

.tips img {
  width: 30px;
  height: 30px;
  position: relative;
  margin-top: 18px;
  margin-left: 66px;
}

.tips span {
  font-size: 15px;
  color: #3c3c3c;
  letter-spacing: -0.05px;
  line-height: 16px;
  display: inline-block;
  position: relative;
  top: -8px;
  margin-left: 13px;
  padding-right: 66px;
}

#picture:hover {
  cursor: pointer;
}

.word {
  width: 1063px;
  height: 60px;
  border: 1px solid #ebeef5;
  border-top: none;
  line-height: 60px;
  text-align: center;
  margin-top: -20px;
  margin-bottom: 30px;
  font-size: 14px;
  color: #909399;
}
</style>
